<template>
  <div class="content-container"
       v-loading="loading"
       :element-loading-text="loadMsg"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.5)"
       style="position: relative;height:calc(100vh - 80px);">
    <div class="panel">
      <div class="menu" style="margin-left: 140px" @click="idcardLogin">
        <img class="icon" src="@/assets/sfzdl.png" />
        <div class="title">身份证登录</div>
      </div>
      <div class="menu" @click="faceLogin">
        <img class="icon" src="@/assets/rlsb.png" />
        <div class="title">人脸识别登录</div>
      </div>
      <div class="menu" @click="scanQrLogin">
        <img class="icon" src="@/assets/scanqr.png" />
        <div class="title">扫码登录</div>
      </div>
      <div class="menu" @click="testLogin">
        <img class="icon" src="@/assets/icon-face.png" />
        <div class="title">测试登录</div>
      </div>

    </div>
    <van-dialog v-model="showIdcardDialog" show-cancel-button :show-confirm-button="false" theme="round-button" :before-close="handleIdClose">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
        <img src="@/assets/icon-readCard.png" class="img"/>
        <span class="text-below">请将身份证放置到识别区域</span>
      </div>
    </van-dialog>
    <van-dialog v-model="showFaceDialog" title="人脸识别登录" show-cancel-button show-confirm-button theme="round-button" :before-close="handleFaceConfirm">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
        <div class="input-form">
          <input v-model="identityID" placeholder="请输入身份证号或手机号码">
        </div>
      </div>
    </van-dialog>
    <van-dialog v-model="showScanQrDialog" show-cancel-button :show-confirm-button="false" style="width: 460px" theme="round-button" :before-close="handleScanClose">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
        <img src="@/assets/scanaction.gif" class="img" style="margin-top: 10px"/>
        <span class="text-below" style="font-weight: bold">{{scanWarnText}}</span>
      </div>
    </van-dialog>

    <van-dialog v-model="showPhoneDialog" title="本人手机号码" show-cancel-button show-confirm-button theme="round-button" :before-close="handlePhoneConfirm">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
        <div class="input-form">
          <input v-model="phoneNumber" placeholder="请输入手机号码">
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {commonApi, loginApi} from "@/api";
import {setUser, setUserOperateTime} from "@/utils/auth";
import ReturnBtn from "@/views/components/ReturnBtn.vue";

export default {
  name:"login-page",
  components: {ReturnBtn},
  data(){
    return {
      cardInfo:null,
      phoneNumber:"",
      showPhoneDialog:false,
      loadMsg:"正在跳转至首页",
      loading:false,
      msg:"登录页",
      showIdcardDialog: false,
      showFaceDialog: false,
      identityID: "",
      showScanQrDialog:false,
      scanWarnText:"请将【福你就业】小程序中的登录二维码对准右下方扫描口",
      startScanTime:"",
      scanQrBegin:false
    }
  },
  mounted() {
    window.onMotionResult = this.onMotionResult
    window.onCardResult = this.onCardResult
    window.onScanQrResult = this.onScanQrResult
    this.stopScanQr()

  },
  methods: {
    stopScanQr(){
      try{
        window.android.stopScan()
      }catch (e){

      }

    },
    testLogin(){
     this.handleLogin({identityID: "350582199608093018"})

    },
    idcardLogin(){
      this.showIdcardDialog = true
      // alert("打开读卡")
      window.android.openCard()
    },
    handleIdClose(action,done){
      done()
    },
    faceLogin(){
      this.showFaceDialog = true
    },

    scanQrLogin(){
      this.stopScanQr()
      this.showScanQrDialog=true
      setTimeout(()=>{
        try{
          window.android.startScanQr()
        }catch (e){

        }
      },10)
    },
    onScanQrResult(data){
      if(data.code=='1'){
          if(data.data.startsWith("mini_app_authorize:")){
            this.handleLogin({qrCode: data.data},"scan")
          }else{
            this.scanWarnText="请展示【福你就业】小程序里的登录二维码"
            setTimeout(()=>{
              window.android.startScanQr()
            },1000)
          }
      }else{
        this.scanWarnText="请将手机中的二维码对准右下方扫描口"

      }
    },
    handleFaceConfirm(action,done) {
      if (action === 'confirm'){
        if (!this.identityID){
          this.$dialog.alert({
            title: "系统提示",
            message: "请输入身份证号或者手机号码",
            theme: "round-button"
          })
          done(false)
          return
        }
        let param = {}
        this.loadMsg="正在启动人脸识别服务"
        this.loading=true
        if (this.identityID.length === 11){
          param.phone = this.identityID
        } else {
          param.sfzh00 = this.identityID
        }
        loginApi.getFaceImageBase64(param).then((res)=>{
          this.loadMsg="正在跳转至首页"
          window.android.openCamera(2,res.data)
        }).finally(()=>{
          this.loading=false
          done()
        })
      } else {
        done()
      }
    },
    handlePhoneConfirm(action,done) {
      if (action === 'confirm'){
        if (!this.phoneNumber){
          this.$dialog.alert({
            title: "系统提示",
            message: "请输入手机号码",
            theme: "round-button"
          })
          done(false)
          return
        }
        let param = {}
        this.loadMsg="正在登录"
        this.loading=true
        this.handleLogin({xm0000:this.cardInfo.Name, identityID: this.cardInfo.ID,phone: this.phoneNumber,loginModel:"readCard"})
      } else {
        done()
      }
    },
    onCardResult(cardInfo){
      // alert(JSON.stringify(cardInfo))
      if (cardInfo) {
        this.cardInfo=cardInfo
        this.handleLogin({xm0000:this.cardInfo.Name,identityID: cardInfo.ID,loginModel:"readCard"},"readCard")
      } else {
        this.$dialog.alert({
          title: "系统提示",
          message: "身份证信息读取失败",
          theme: "round-button"
        })
      }
    },
    onMotionResult(obj){
      // alert("人脸比对结果："+JSON.stringify(obj))
      if (obj?.success) {
        this.loading=true
        let param = {}
        if (this.identityID.length === 11){
          param.phone = this.identityID
        } else {
          param.identityID = this.identityID
        }
        this.handleLogin(param)
      } else {
        this.$dialog.alert({
          title: "系统提示",
          message: "人脸识别比对失败",
          theme: "round-button"
        })
      }
    },
    handleLogin(param,type){
      loginApi.login({
        channelNum: "3",
        ...param
      },{
        showLoading: false
      }).then((ures)=>{
        let accountInfo=ures.data
        if(type=="readCard"){
          if(accountInfo.yhzt00=='wzc'){
              this.showPhoneDialog=true
              return
          }
        }
        commonApi.queryInfo().then((res)=>{
          this.loadMsg="正在跳转至首页"
          setUser({...accountInfo,...res.data})
          setUserOperateTime(new Date().getTime())
          this.$parent.getLoginInfo()
          this.$router.push("/")
        })
      }).finally(()=>{
        if(type=='scan'){
          this.showScanQrDialog=false
        }
      })
    },
    handleScanClose(action,done){
      done()
      this.showScanQrDialog=false
      this.stopScanQr()
    }
  }
}
</script>
<style lang="scss" scoped>
.panel{
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  .menu{
    cursor: pointer;
    margin-left: 110px;
    margin-top: 150px;
    width: 327px;
    height: 373px;
    border-radius: 34px;
    background-color: rgba(0,0,0,0.15);
    border: 1px solid rgba(187,187,187,1);
    .title{
      margin-top: 20px;
      font-size: 48px;
      text-align: center;
      font-family: PingFangSC-medium;
      color: white;
    }
    .icon{
      margin-top: 30px;
      width: 200px;
      height: 200px;
    }

  }
}
.input-form {
  width: 80%;
  margin: 0.5rem 0;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    font-size: 0.3rem;
    color: black;
    width: 25%;
    text-align: center;
  }

  input {
    font-size: 0.3rem;
    color: black;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to left,lightsteelblue,lightblue);
    padding: 0.2rem;
  }
}
.van-dialog {
  position: fixed;
  top: 200px;
  left: 50%;
  width: 320px;
  overflow: hidden;
  font-size: 16px;
  background-color: #fff;
  border-radius: 16px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
</style>
